<template>
  <div class="user-dropdown">
    <!-- 触发区域：头像 + 文字操作区 -->
    <div class="user-trigger" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
      <!-- 头像 -->
      <img class="user-avatar" src="../../../assets/imgs/user/jd_logo.png" alt="用户头像">
      <!-- 文字操作区 -->
      <div class="text-section">
        <p class="plus-tip">开PLUS享无限免邮</p>
        <div class="actions">
          <span class="action-link" @click.prevent="handleLoginClick">切换账号</span>
          <span class="divider">|</span>
          <span class="action-link" @click.prevent="handleLogout">退出</span>

        </div>
      </div>
    </div>

    <!-- 下拉菜单（功能按钮区） -->
    <transition name="dropdown-fade">
      <div v-show="showDropdown" class="dropdown-menu" @mouseenter="showDropdown = true"
        @mouseleave="showDropdown = false">
        <!-- 功能按钮区 -->
        <div class="feature-buttons">
          <div class="feature-item" v-for="(item, index) in featureList" :key="index">
            <img :src="item.icon" alt="icon" class="feature-icon">
            <p class="feature-text">{{ item.text }}</p>
          </div>
        </div>

      </div>
    </transition>

    <!-- 登录弹窗组件 -->
    <LoginDialog v-model="dialogVisible" />
    <!-- 退出登录组件 -->
    <LogoutDialog v-model="logoutDialogVisible"/>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const dialogVisible = ref(false);
const logoutDialogVisible = ref(false);
// import { useAuthStore } from '@/stores/auth';
// const authStore = useAuthStore();
import { ElMessage } from 'element-plus'
const showDropdown = ref(false); // 控制下拉菜单显示
import LoginDialog from '@/components/login/LoginDialog.vue';
import LogoutDialog from '@/components/logout/LogoutDialog.vue';
import icon_free from '@/assets/imgs/user/icons/icon_free.png';
import icon_transport from '@/assets/imgs/user/icons/icon_transport.png';
import icon_fix from '@/assets/imgs/user/icons/icon_fix.png';
// 功能按钮配置（与目标样式对齐）
const featureList = ref([
  {
    icon: icon_free,
    text: '免费试用'
  },
  {
    icon: icon_transport,
    text: '无限免邮'
  },
  {
    icon: icon_fix,
    text: '只换不修'
  }
]);

// 切换账号弹出登录组件
const handleLoginClick = () => {
  dialogVisible.value = true;
};

const handleLogout = async () => {
  try {
     logoutDialogVisible.value = true;
    // await authStore.logout();
  } catch {
    ElMessage.error('退出登录失败');
  }
};
</script>

<style lang="scss" scoped>
.user-dropdown {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 240px;
  /* 固定宽度，与目标样式对齐 */
  padding: 8px 12px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: box-shadow 0.2s;

  /* 触发区 hover 反馈 */
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  /* 触发区域：头像 + 文字 */
  .user-trigger {
    display: flex;
    align-items: center;
    width: 100%;

    .user-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }

    .text-section {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .plus-tip {
        font-size: 14px;
        color: #333;
        margin: 0 0 4px;
        font-weight: 500;
      }

      .actions {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999;

        .action-link {
          cursor: pointer;
          margin-right: 8px;
          transition: color 0.2s;
        }

        .divider {
          color: #ccc;
          margin: 0 4px;
        }
      }
    }
  }

  /* 下拉菜单：功能按钮区 */
  .dropdown-menu {
    position: relative;
    width: 100%;
    margin-top: 12px;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;

    .feature-buttons {
      display: flex;
      justify-content: space-between;

      .feature-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30%;
        /* 三等分 */
        cursor: pointer;
        transition: color 0.2s;

        .feature-icon {
          width: 24px;
          height: 24px;
          margin-bottom: 4px;
        }

        .feature-text {
          font-size: 12px;
          margin: 0;
        }
      }
    }
  }

  /* 下拉动画（可选） */
  .dropdown-fade-enter-active,
  .dropdown-fade-leave-active {
    transition: opacity 0.2s;
  }

  .dropdown-fade-enter-from,
  .dropdown-fade-leave-to {
    opacity: 0;
  }
}
</style>
